<script lang="ts" setup>
import { ref } from 'vue';
import API from '@/services';
import AQueryTable from '@dangojs/a-query-table';
import { Message, Modal } from '@arco-design/web-vue';
import AddDimensionDrawer from '@/views/indexDevelop/modelManage/components/AddDimensionDrawer/index.vue';
import BindDimensionModal from '@/views/indexDevelop/modelManage/components/BindDimensionModal/index.vue';
import { useRouter } from 'vue-router';
import * as RouteNames from '@/router/consts';

const router = useRouter();
const dimensiontableRef = ref<any>(null);
const columns: any[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 55
  },
  {
    title: '维度表',
    slotRenderName: 'tableName',
    minWidth: 300
  },
  {
    title: '绑定维度数量',
    dataIndex: 'dimTableNum',
    width: 200
  },
  {
    title: '创建人',
    dataIndex: 'createByName',
    width: 160
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180
  },
  {
    title: '操作',
    width: 80,
    fixed: 'right',
    slotRenderName: 'operate'
  }
];
const requestData = async (query: any) => {
  try {
    const res = await API.dataTable.postDataTableGetDimTablePage(query);
    if (res.data) {
      return {
        success: true,
        data: res.data.list,
        total: Number(res.data.total)
      };
    }
    return {
      success: true,
      data: [],
      total: 0
    };
  } catch (e) {}
};
const bindDimensionList = ref<any>([]);
const showAddDimension = ref(false);
const showBindDimension = ref(false);
const nowBindItem = ref({});
const isRevise = ref(false);
const showBindModal = (item: any) => {
  console.log('显示出modal');
  bindDimensionList.value = [];
  nowBindItem.value = item;
  showBindDimension.value = true;
  isRevise.value = false;
};
// 删除维表
const fetchDelete = async (id: any) => {
  try {
    let res = await API.dataTable.deleteDataTableDelDimTableById({ id });
    return res;
  } catch (error) {
    throw error;
  }
};
const deleteDimension = (record: any) => {
  Modal.confirm({
    modalClass: 'model-message-confirm',
    title: '是否确定删除该维表？',
    content: '删除后不可恢复',
    simple: false,
    closable: true,
    okText: '确认删除',
    okButtonProps: {
      style: {
        backgroundColor: '#FF1A3B'
      }
    },
    onBeforeOk: (done) => {
      fetchDelete(record.id)
        .then((res: any) => {
          if (res.code === 200) {
            Message.success('删除成功');
            dimensiontableRef.value.reload();
          } else {
            Message.error(res.msg);
          }
        })
        .finally(() => {
          done(true);
        });
    }
  });
};

// 修改维度
const reviseModal = (item: any) => {
  isRevise.value = true;
  showBindDimension.value = true;
  nowBindItem.value = item;
};

// 关联维度弹窗确定传参
const sureDimension = (val: any) => {
  bindDimensionList.value = val;
  showBindDimension.value = false;
};

// 点击取消
const cancelDimension = (val: any) => {
  showBindDimension.value = false;
};

// 点击跳转到维度详情页
const toDetail = (record: any) => {
  router.push({
    name: RouteNames.ROUTE_DIMENSIONDETAIL,
    params: {
      id: record.id
    }
  });
};

// 更新维表表格
const updateList = () => {
  dimensiontableRef.value.reload();
};
</script>

<template>
  <div>
    <div class="p-18 btn-flex">
      <a-button type="primary" @click="showAddDimension = true">
        添加维表
      </a-button>
    </div>

    <AQueryTable
      ref="dimensiontableRef"
      :columns="columns"
      :request="requestData"
      class="p-18"
    >
      <template #tableName="{ record }">
        <a-button type="text" @click="toDetail(record)">{{
          record.tableName
        }}</a-button>
      </template>
      <template #operate="{ record }">
        <a-button type="text" @click="deleteDimension(record)">删除</a-button>
      </template>
    </AQueryTable>

    <AddDimensionDrawer
      v-model:visible="showAddDimension"
      unmountOnClose
      @show-bind-modal="showBindModal"
      @revise-modal="reviseModal"
      @update-list="updateList"
    />
    <BindDimensionModal
      :visible="showBindDimension"
      :now-bind-item="nowBindItem"
      :is-revise="isRevise"
      @sure-dimension="sureDimension"
      @cancel-dimension="cancelDimension"
    />
  </div>
</template>

<style lang="scss" scoped>
.btn-flex {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
